---
title: Color Mode
description: Adding support for light and dark color mode
---

Saas UI uses [`next-themes`](https://github.com/pacocoursey/next-themes)
to add support for light and dark color mode.

## Composition

```tsx
import {
  ColorModeTrigger,
  DarkMode,
  LightMode,
  useColorMode,
  useColorModeValue,
} from '@saas-ui/react/color-mode'
```

## `useColorMode`

The `useColorMode` hook returns the current color mode and a function to toggle
the color mode.

<ExampleTabs name="color-mode-basic" />

Calling `toggleColorMode` or `setColorMode` anywhere in your app tree toggles
the color mode from light or dark and vice versa.

## `useColorModeValue`

The `useColorModeValue` hook returns a value based on the current color mode.

Here's the signature:

```tsx
const result = useColorModeValue('<light-mode-value>', '<dark-mode-value>')
```

The value returned will be the value of the light mode if the color mode is
`light`, and the value of the dark mode if the color mode is `dark`.

<ExampleTabs name="color-mode-value" />

## Hydration Mismatch

When using `useColorModeValue` or `useColorMode` in SSR, you may notice a
hydration mismatch when the page is mounted. This is because the color mode
value is computed on the server side.

To avoid this, use the `ClientOnly` component to wrap the component that uses
`useColorModeValue` and render a skeleton until mounted on the client side.

<ExampleTabs name="color-mode-value-fallback" />

## Forced Color Mode

Using the `LightMode` and `DarkMode` components it's possible to force the color
mode for a specific component or a group of components.

<ExampleTabs name="color-mode-forced" />
